import { FC, useState } from 'react';
import { Button, Drawer, DrawerProps } from 'antd';

import { CheckOutlined, RollbackOutlined } from '@ant-design/icons';
import { getValidateMessage } from '@/utils/validate-rules/message';
import CheckboxTableForm from '@/biz-components/hoc-form/checkbox-table-form';
import { DynamicObjectAny } from '@/typings';

interface CheckboxTableDrawerProps extends DrawerProps {
  cancel: () => void;
  confirm: (values: any[]) => void;
  defaultValue?: any[];
  extraPrams?: DynamicObjectAny;
  pageCode: string;
  pageApi: string;
  drawerRowSelection: any; // 外部传入的rowSelection
  noPagination?: boolean;
  noQueryKeys?: boolean;
  rowKey?: string;
}

const CheckboxTableDrawer: FC<CheckboxTableDrawerProps> = (props) => {
  const {
    visible,
    cancel,
    confirm,
    defaultValue,
    extraPrams,
    pageCode,
    pageApi,
    drawerRowSelection,
    noPagination,
    noQueryKeys,
    rowKey
  } = props;
  const [values, setValues] = useState<any[]>([]);

  const handleCheckClick = () => {
    confirm(values);
  };

  const handleRollbackClick = () => {
    cancel();
  };

  const changeSelect = (vals: any[]) => {
    setValues(vals);
  };

  const { getCheckboxProps, ...propsRowSelection } = drawerRowSelection || {};
  let rowSelection: any = {
    onChange: (selectedRowKeys: string[], selectedRows: any[]) => {

      changeSelect(selectedRows);
    },
    ...propsRowSelection,
    getCheckboxProps: (record: any) => {
      if (getCheckboxProps) {
        return getCheckboxProps(record, values);
      }
    },
  };
  return (
    <>
      <Drawer
        title="请选择"
        placement="right"
        closable={false}
        onClose={handleRollbackClick}
        visible={visible}
        width="90%"
        maskClosable={false}
        footer={
          <div className="page__foot">
            <div className="content__slot__left">
              <Button
                onClick={handleRollbackClick}
                icon={<RollbackOutlined />}
                className="reset-btn"
              >
                {getValidateMessage('common.cancel', true)}
              </Button>
            </div>
            <div className="page__foot_right_btns">
              <Button onClick={handleCheckClick} type="primary" icon={<CheckOutlined />}>
                {getValidateMessage('common.confirm', true)}
              </Button>
            </div>
          </div>
        }
        bodyStyle={{
          overflowX: 'hidden',
        }}
      >
        <CheckboxTableForm
          noTableOpCol
          pageCode={pageCode}
          pageApi={pageApi}
          noModal
          rowKey={rowKey}
          needGroup
          rowSelection={rowSelection}
          defaultValue={defaultValue}
          noQueryKeys={noQueryKeys}
          oldValue={values}
          extraPrams={extraPrams}
          noPagination={noPagination}
        />
      </Drawer>
    </>
  );
};



export default CheckboxTableDrawer;
